<ui:composition         
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:ds="http://deltaset.org/deltaset-faces"
    xmlns:h="http://java.sun.com/jsf/html" 
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
	xmlns:p="http://primefaces.org/ui">

   <h:form>  
  
    <h:panelGrid columns="2" cellpadding="10">  
        <h:outputText value="Default Switcher:" />   
        <p:themeSwitcher style="width:150px">  
            <f:selectItem itemLabel="Choose Theme" itemValue="" />  
            <f:selectItems value="#{themeSwitcherBean.themes}" />  
        </p:themeSwitcher>  
  
        <h:outputText value="Stateful Switcher:" />   
        <p:themeSwitcher value="#{themeSwitcherBean.theme}" style="width:150px" effect="fade">  
            <f:selectItem itemLabel="Choose Theme" itemValue="" />  
            <f:selectItems value="#{themeSwitcherBean.themes}" />  
            <p:ajax listener="#{themeSwitcherBean.saveTheme}" />  
        </p:themeSwitcher>  
  
        <h:outputText value="Theme Preview:" />   
        <p:themeSwitcher style="width:150px" effect="fade" var="t">  
            <f:selectItem itemLabel="Choose Theme" itemValue="" />  
            <f:selectItems value="#{themeSwitcherBean.advancedThemes}" var="theme" itemLabel="#{theme.name}" itemValue="#{theme}"/>  
  
            <p:column>  
                <p:graphicImage value="/images/themes/#{t.image}" width="90" height="60"/>  
            </p:column>  
  
            <p:column>  
                #{t.name}  
            </p:column>  
        </p:themeSwitcher>  
    </h:panelGrid>  
  
    <p:separator />  
  
    <p:commandButton value="Button" />  
  
    <p:panel header="Panel">  
        Panel Content  
    </p:panel>  
  
    <p:toolbar>  
        <p:toolbarGroup align="left">  
            <p:commandButton type="button" value="New" icon="ui-icon-document" />  
  
            <p:commandButton type="button" value="Open" icon="ui-icon-folder-open"/>  
  
            <p:separator />  
  
            <p:commandButton type="button" title="Save" icon="ui-icon-disk"/>  
            <p:commandButton type="button" title="Delete" icon="ui-icon-trash"/>  
            <p:commandButton type="button" title="Print" icon="ui-icon-print"/>  
        </p:toolbarGroup>  
  
        <p:toolbarGroup align="right">  
            <p:menuButton value="Navigate">  
                <p:menuitem value="Home" url="http://www.primefaces.org" />  
                <p:menuitem value="ShowCase" url="http://www.primefaces.org/showcase" />  
                <p:menuitem value="TouchFaces" url="http://www.primefaces.org/showcase/touch" />  
            </p:menuButton>  
        </p:toolbarGroup>  
  
    </p:toolbar>  
  
    <p:tabView>  
        <p:tab title="Tab1">Tab1 Content</p:tab>  
        <p:tab title="Tab2">Tab2 Content</p:tab>  
        <p:tab title="Tab3">Tab3 Content</p:tab>  
    </p:tabView>  
  
</h:form>

</ui:composition>   
